<!--
 * @Author: 周洋 1430536748@qq.com
 * @Date: 2024-08-10 01:30:15
 * @LastEditors: 周洋 1430536748@qq.com
 * @LastEditTime: 2024-08-10 02:43:11
 * @version: 1.2.5
 * @Description: 图标
-->
<script setup lang="ts">

</script>
<template>
    <div class="container">
        <div class="line">
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
        </div>
        <div class="line">
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
        </div>
        <div class="line">
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
        </div>
    </div>
</template>
<style scoped lang="scss">
$n: 10;
$size: 100vw/$n;

.container{
   
}

.line {
    display: flex;

    //错位效果,偶数行，向右偏移
    &:nth-child(even) {
        transform: translateX(-$size/2);
    }

    &:nth-child(n+2) {
        margin-top: -$size/8;
    }
}

.item {
    width: $size;
    height: $size;
    background-color: bisque;
    outline: 1px solid red;
    //裁剪属性;裁剪为6边形
    clip-path: polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
    flex-shrink: 0;


}
</style>